<template>
	<div class="header">
		<div class="logo-wrap">
			<div class="logo">
				<img class="padding-left-sm" src="../assets/img/login.png" />
				<span class="title text-df margin-left-xs" v-if="!collapse">{{headerTitle}}</span>
			</div>
			<div class="isCollapse">
				<div v-if="!collapse">
					<img src="../assets/img/shouqi.png" @click="collapseChage" />
				</div>
				<div v-else>
					<img class="margin-left-sm" src="../assets/img/zhankai.png" @click="collapseChage" />
				</div>
			</div>
			<div class="subnav el-flex">
				<div :class="['subnav-item',{'active':onRoutes==val.index}]" @click="toPath(val.index)"
					v-for="(val,key) in subs" :key="val.index">
					<el-badge :value="val.count>0?val.count:''">
						<div class="activeStyle text-xs">{{val.title}}</div>
					</el-badge>
				</div>
			</div>
		</div>
		<div class="header-right">
			<div class="header-user-con">
				<div class="right-content">
					<div class="user-avator cp">
						<img src="../assets/img/head-icon.png" />
					</div>

					<div class="margin-right">
						<el-dropdown trigger="click" >
							<span class="el-dropdown-link cp" style="color: #fff;font-size: 15px;">
								{{userImg.name}}<i class="el-icon-arrow-down el-icon--right"></i>
							</span>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item @click.native="openUpate()">修改密码</el-dropdown-item>
								<el-dropdown-item  @click.native="layout()">退出登录</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</div>
					<!-- <div class="margin-right text-15">{{userImg.name}}</div> -->
					<!-- <div class="margin-right text-15 cp">退出登录</div> -->
				</div>
			</div>
		</div>
		<el-dialog title="修改用户" :visible.sync="dialog.updateDialog" width="40%" >
			<div slot="title" class="dialog-header">修改用户</div>
			<div class="dialog-content-box">
				<el-form ref="updateForm" label-width="100px">
					<el-form-item label="新密码" prop="password">
						<el-input type="password" v-model="updateForm.password"></el-input>
					</el-form-item>
					<div class="margin-top">
						<el-form-item label="确认密码" prop="checkPass" style="margin-top: 20px;">
							<el-input type="password" v-model="updateForm.checkPass"></el-input>
						</el-form-item>
					</div>
				</el-form>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialog.updateDialog = false">关 闭</el-button>
				<el-button type="primary" @click="updatePwd()">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
	import {
		addUser
	} from '../page/configure/index.js';
	import { headerTitle } from '../api/request'
	export default {
		data() {
			return {
				dialog:{
					updateDialog:false,
				},
				updateForm:{
					password:'',
					checkPass:'',
					
				},
				id:'',
				user:localStorage.getItem("userInfo"),
				count: 0,
				name: "linxin",
				message: 2,
				head_pic: '../assets/img/head.jpg',
				headerTitle
			};
		},
		computed: {
			onRoutes() {
				return this.$route.path.replace("/", "")
			},
			subs() {
				return this.$store.state.subs
			},
			userImg() {
				let userInfo = localStorage.getItem("userInfo");
				userInfo = JSON.parse(userInfo)
				if (userInfo == null) {
					return this.head_pic
				}
				return userInfo;
			},
			collapse() {
				return this.$store.state.collapse;
			},
		},
		methods: {
			openUpate(){
				this.dialog.updateDialog=true
				this.updateForm = this.$options.data().updateForm
			},
			updatePwd(){
				let userInfo = JSON.parse(this.user)
				this.id=userInfo.id
				if(Number(this.updateForm.password.length)<4){
					this.$message.error('请输入大于4位的密码')
					return
				}
				if(this.updateForm.password!=this.updateForm.checkPass){
					this.$message.error('两次输入密码不一致')
					return
				}
				
				addUser({id:this.id,row:this.updateForm}).then(res => {
					this.layout()
					this.dialog.updateDialog = false
					this.$message.success('操作成功');
				});
			},
			layout() {
				localStorage.clear();
				this.$router.push('/login');
			},
			toPath(path) {
				if (this.$route.fullPath == "/" + path) {
					return
				}
				this.$router.push("/" + path);
			},
			// 侧边栏折叠
			collapseChage() {
				this.$store.commit("hadndleCollapse", !this.collapse);
			},
			getParam() {
				let url = window.location.href
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
				var r = url.split('#')[1].substr(1)
				return r;
			}
		},
		mounted() {
			if (document.body.clientWidth < 1500) {
				this.collapseChage();
			}
		}
	};
</script>
<style scoped lang="less">
	.header {
		/deep/.el-badge__content.is-fixed {
			position: absolute;
			top: 4px;
			right: 8px;
		}

		width: 100%;
		height: 56px;
		font-weight: bold;
		color: #fff;
		background: #2f80ed;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.logo-wrap {
			font-weight: bold;
			color: #fff;
			background: #2F80ED;
			display: flex;
			align-items: center;
			height: 56px;

			.logo {
				display: flex;
				font-weight: bold;
				align-items: center;
				color: #fff;

				.title {
					width: 130px;
					min-width: 130px;
				}

				img {
					height: 32px;
					width: 32px;
				}
			}

			.isCollapse {
				img {
					width: 36px;
					height: 36px;
					margin-bottom: -6px;
					cursor: pointer;
				}
			}
		}

		.header-user-con {
			display: flex;
			align-items: center;

			.right-content {
				display: flex;
				align-items: center;

				.icon {
					img {
						width: 20px;
						width: 20px;
						margin-right: 16px;
						margin-bottom: -6px;
					}

					/deep/.el-badge__content.is-fixed {
						top: 10px !important;
						left: 14px
					}
				}
			}

		}

		.subnav {
			margin-left: 20px;
			background: #2F80ED;

			.subnav-item {
				padding: 0 30px;
				height: 56px;
				cursor: pointer;
				display: flex;
				align-items: center;

				.activeStyle {
					padding: 0 30px;
					height: 42px;
					line-height: 42px;
					border-radius: 6px;
				}
			}

			.active {
				.activeStyle {
					background: #FFF;
					color: #2F80ED;
				}
			}
		}
	}


	.user-avator img {
		display: block;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		margin-right: 10px;
	}
</style>
